<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>排列图片</title>
        <style>
            html,body,ul,h2 {
                margin:0;
                padding:0;
            }
            #btn {
                width:1000px;
                height:60px;
                margin:20px auto 0px;
                list-style-type:none;
                text-align:center;
                background:#f1f1f1;
                line-height:60px;
            }
            #btn li {
                display:inline-block;
                text-align:center;
                width:100px;
                height:30px;
                background:#009999;
                line-height:30px;
                color:#fff;
                cursor:pointer;
            }
            #showBox {
                width:1000px;
                height:220px;
                margin:0 auto;
                list-style-type:none;
                text-align:center;
                background:#f1f1f1;
            }
            #showBox li {
                width:240px;
                height:80px;
                float:left;
                margin-top:20px;
                font-size:14px;
            }
        </style>
        <script>
            window.onload = function () {
                var oBtn = document.getElementById("btn");
                var aBtn = oBtn.getElementsByTagName("li");
                var oShowbox = document.getElementById("showBox");
                var aLi = oShowbox.getElementsByTagName("li");
                var str = "";
                var flag = true;
                var arr = [];
                    for(var i=0; i<aLi.length; i++) {
                        arr.push( aLi[i] );
                    }
                aBtn[0].onclick = function () {
                    
                    
                    arr.reverse();
                    var str = "";
                    
                    for(var i=0; i<arr.length; i++) {
                        str += "<li>"+ arr[i].innerHTML +"</li>";
                    }
                    oShowbox.innerHTML = str;
                    this.innerHTML = flag ? "从小到大" : "从大到小";
                    flag = !flag;
                }
                
                aBtn[1].onclick = function () {
                    var arr2 = [];
                    var str = "";
                    for(var i=0; i<aLi.length; i++) {
                        arr2.push( aLi[i] );
                    }
                    arr2.sort( function (a,b) {
                        return Math.random() - 0.5;
                    } )
                    
                    for(var i=0; i<arr2.length; i++) {
                        str += "<li>"+ arr2[i].innerHTML +"</li>";
                    }
                    oShowbox.innerHTML = str;
                }
            }
        </script>
    </head>
    <body>
        <ul id="btn">
            <li>从大到小</li>
            <li>随机排列</li>
        </ul>
        <ul id="showBox">
            <li>
                <img src="img2/1.jpg"/>
                <h2>1-真功夫</h2>
            </li>
            <li>
                <img src="img2/2.jpg"/>
                <h2>2-肯德基</h2>
            </li>
            <li>
                <img src="img2/3.jpg"/>
                <h2>3-麦当劳</h2>
            </li>
            <li>
                <img src="img2/4.jpg"/>
                <h2>4-绝味鸭脖</h2>
            </li>
            <li>
                <img src="img2/5.jpg"/>
                <h2>5-周黑鸭</h2>
            </li>
            <li>
                <img src="img2/6.jpg"/>
                <h2>6-良品铺子</h2>
            </li>
            <li>
                <img src="img2/7.jpg"/>
                <h2>7-盐津铺子</h2>
            </li>
            <li>
                <img src="img2/8.jpg"/>
                <h2>8-三只松鼠</h2>
            </li>
        </ul>
    </body>
</html>